

<!--YuCodeGen Start Here-->

<div class="p-5">
    <h4 class="mb-4">Create a Student</h4>

    <form [formGroup]="form">
    <div class="form-group row">
        <label for="Id" class="col-sm-3 col-form-label">Id:</label>
        <div class="col-sm-9">
                <input type="text" formControlName="Id"    id="Id" />
            <div *ngIf="Id.invalid && (Id.dirty || Id.touched)" class="alert alert-danger">
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="Name" class="col-sm-3 col-form-label">Name:</label>
        <div class="col-sm-9">
                <input type="text" formControlName="Name" required maxlength="20"  id="Name" />
            <div *ngIf="Name.invalid && (Name.dirty || Name.touched)" class="alert alert-danger">
                    <div *ngIf="Name.errors.required">Name is required.</div>
                    <div *ngIf="Name.errors.minlength">Name must be at least 20 characters long.</div>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="Phone" class="col-sm-3 col-form-label">Phone:</label>
        <div class="col-sm-9">
                <input type="tel" formControlName="Phone"    id="Phone" />
            <div *ngIf="Phone.invalid && (Phone.dirty || Phone.touched)" class="alert alert-danger">
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="Birthday" class="col-sm-3 col-form-label">Birthday:</label>
        <div class="col-sm-9">
                <input type="date" formControlName="Birthday" required   id="Birthday" />
            <div *ngIf="Birthday.invalid && (Birthday.dirty || Birthday.touched)" class="alert alert-danger">
                    <div *ngIf="Birthday.errors.required">Birthday is required.</div>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="Address" class="col-sm-3 col-form-label">Address:</label>
        <div class="col-sm-9">
                <input type="text" formControlName="Address"  maxlength="50"  id="Address" />
            <div *ngIf="Address.invalid && (Address.dirty || Address.touched)" class="alert alert-danger">
                    <div *ngIf="Address.errors.minlength">Address must be at least 50 characters long.</div>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="Email" class="col-sm-3 col-form-label">Email:</label>
        <div class="col-sm-9">
                <input type="email" formControlName="Email" required   id="Email" />
            <div *ngIf="Email.invalid && (Email.dirty || Email.touched)" class="alert alert-danger">
                    <div *ngIf="Email.errors.required">Email is required.</div>
                    <div *ngIf="Email.errors.email">Email must be a email address.</div>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="Age" class="col-sm-3 col-form-label">Age:</label>
        <div class="col-sm-9">
                <input type="text" formControlName="Age" required   id="Age" />
            <div *ngIf="Age.invalid && (Age.dirty || Age.touched)" class="alert alert-danger">
                    <div *ngIf="Age.errors.required">Age is required.</div>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="Avatar" class="col-sm-3 col-form-label">Avatar:</label>
        <div class="col-sm-9">
                <input type="text" formControlName="Avatar"    id="Avatar" />
            <div *ngIf="Avatar.invalid && (Avatar.dirty || Avatar.touched)" class="alert alert-danger">
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="Password" class="col-sm-3 col-form-label">Password:</label>
        <div class="col-sm-9">
                <input type="password" formControlName="Password"    id="Password" />
            <div *ngIf="Password.invalid && (Password.dirty || Password.touched)" class="alert alert-danger">
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="Url" class="col-sm-3 col-form-label">Url:</label>
        <div class="col-sm-9">
                <input type="url" formControlName="Url"    id="Url" />
            <div *ngIf="Url.invalid && (Url.dirty || Url.touched)" class="alert alert-danger">
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="Regular" class="col-sm-3 col-form-label">Regular:</label>
        <div class="col-sm-9">
                <input type="text" formControlName="Regular"   pattern="[A-z]{3}" id="Regular" />
            <div *ngIf="Regular.invalid && (Regular.dirty || Regular.touched)" class="alert alert-danger">
                    <div *ngIf="Regular.errors.requiredPattern">Regular must follow this pattern:{{Regular.errors.requiredPattern.value}}</div>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="History" class="col-sm-3 col-form-label">History:</label>
        <div class="col-sm-9">
                <textarea formControlName="History" required maxlength="100" id="History"></textarea>
            <div *ngIf="History.invalid && (History.dirty || History.touched)" class="alert alert-danger">
                    <div *ngIf="History.errors.required">History is required.</div>
                    <div *ngIf="History.errors.minlength">History must be at least 100 characters long.</div>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="Appendix" class="col-sm-3 col-form-label">Appendix:</label>
        <div class="col-sm-9">
                <input type="text" formControlName="Appendix"    id="Appendix" />
            <div *ngIf="Appendix.invalid && (Appendix.dirty || Appendix.touched)" class="alert alert-danger">
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="Getup" class="col-sm-3 col-form-label">Getup:</label>
        <div class="col-sm-9">
                <input type="date" formControlName="Getup"    id="Getup" />
            <div *ngIf="Getup.invalid && (Getup.dirty || Getup.touched)" class="alert alert-danger">
            </div>
        </div>
    </div>
    </form>
    <div>
                <button (click)="saveClick()" [disabled]="!form.valid" mat-raised-button color="primary"><mat-icon>save</mat-icon> Save</button>
                <button (click)="cancelClick()" mat-raised-button class="m-1"><mat-icon>cancel</mat-icon>Cancel</button>
    </div>
    

</div>

<!-- <p>
    {{form.value|json}}
</p>
<p>
    {{form.status}}
</p> -->
<!--YuCodeGen End Here-->
